<template>
	<view>
		<!-- 时间选择器 -->
		<view class="select">
			<u-picker mode="time" v-model="show" :params="params" @confirm="choiseTime" :start-year="2021"
				:end-year="year"></u-picker>
			<view class="date" @click="show=true">{{date}}</view>
			<u-icon name="arrow-down" color="#909090" size="20"></u-icon>
			<view class="type" @click="show_b=true">
				<view style="margin-right: 10rpx;">交易类型</view>
				<u-icon name="arrow-down" color="#909090" size="20"></u-icon>
			</view>
		</view>
		<scroll-view class="scroll" scroll-y @scrolltolower="getinfo">
			<view class="item" v-for="(item,index) in list">
				<!-- <image src="../../../static/usericon/touxiang.png" mode=""></image> -->
				<view class="item-middle">
					<view>{{item.detailedType | detailedType}}</view>
					<view >{{item.remarks}}</view>
					<view>{{$u.timeFormat(item.createTime, 'yyyy-mm-dd hh:MM:ss')}}</view>
				</view>
				<view class="item-right" v-if="item.transactionType==2">
					{{item.changeType | changeType}}{{item.integral}}积分</view>
				<view class="item-right" v-if="item.transactionType==1">{{item.changeType | changeType}}￥{{item.money}}
				</view>
				<view class="item-right" v-if="item.transactionType==3">
					{{item.changeType | changeType}}{{item.money}}cgc</view>
			</view>
		</scroll-view>
		<view>
			<u-popup v-model="show_b" mode="bottom" border-radius="14" :closeable="true">
				<view class="pp">
					<view class="ppt">选择交易类型</view>
					<view class="ppbox">
						<view class="ppitem" :class="{'ppactive':ppactive==index}" @click="active(index)"
							v-for="(item,index) in typelist">{{item.dictLabel}}</view>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import {
		zhangdan,
		jxtype
	} from "../../../api/user.js"
	export default {
		data() {
			return {
				show: false,
				show_b: false,
				params: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				date: '',
				ppactive:0,
				nowdate: "",
				num: 1,
				year: "",
				detailedType: null, //变动场景(1:红包，2:转账，3:商户消费，4:充值，5:提现，6:市场交易，7:签到)
				transactionType: null, //交易类型(1:余额，2:积分，3:CGC）
				list: [],
				typelist: [{
					dictLabel: "全部",
					dictValue: 0
				}]

			}
		},
		filters: {
			changeType(val) {
				if (val == 2) {
					return "+"
				} else {
					return "-"
				}
			},
			detailedType(val) {
				if (val == 1) {
					return "红包"
				}
				if (val == 2) {
					return "转账"
				}
				if (val == 3) {
					return "商户消费"
				}
				if (val == 4) {
					return "充值"
				}
				if (val == 5) {
					return "提现"
				}
				if (val == 6) {
					return "市场交易"
				}
				if (val == 7) {
					return "签到"
				}
				if (val == 8) {
					return "做任务"
				}
			}
		},
		onLoad() {
			this.getnowdate()
			this.getType()
			this.getinfo()
		},
		methods: {
			// 获取当前时间
			getnowdate() {
				var now = new Date();
				console.log(now)
				var month = (now.getMonth() + 1).toString()
				if (month.length == 1) {
					month = "0" + month
				}
				this.date = now.getFullYear() + '年' + month + '月'
				this.nowdate = now.getFullYear() + '-' + month
				this.year = now.getFullYear()
			},
			// 选择时间
			choiseTime(e) {
				console.log(e)
				this.date = e.year + '年' + e.month + '月'
				this.nowdate = e.year + '-' + e.month
				this.list = []
				this.num = 1
				this.getinfo()
			},
			active(e) {
				this.ppactive = e
				if(e!=0){
					this.detailedType=e
				}else{
					this.detailedType=e
				}
				this.show_b = false
				this.list = []
				this.num = 1
				this.getinfo()
			},
			async getinfo() {
				let data = {
					pageNum: this.num,
					pageSize: 15,
					date: this.nowdate
				}
				if (this.detailedType != null) {
					data.detailedType = this.detailedType
				}
				if (this.transactionType != null) {
					data.transactionType = this.transactionType
				}
				let res = await this.get(zhangdan, data)
				this.num++
				this.list = [...this.list, ...res.data]
			},
			async getType() {
				let res = await this.get(jxtype)
				this.typelist = [...this.typelist,...res.data]
			}
		}
	}
</script>

<style lang="less">
	.ppbox {
		display: flex;
		flex-wrap: wrap;
		padding: 30rpx;
	}

	.ppitem {
		width: 222rpx;
		height: 80rpx;
		background: #FFFFFF;
		opacity: 1;
		text-align: center;
		line-height: 80rpx;
		color: #999999;
		margin: 0 5rpx 10rpx;
	}

	.ppactive {
		background: linear-gradient(180deg, #F09238 0%, #EC5F2A 100%);
		color: #FFFFFF;
	}

	.ppt {
		height: 80rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 80rpx;
		color: #333333;
		opacity: 1;
		border-bottom: 1px #DFDFDF solid;
		text-align: center;
	}

	.pp {
		background-color: #F6F6F6;
		// height: 400rpx;
	}

	.type {
		display: flex;
		align-items: center;
		position: absolute;
		right: 30rpx;
	}

	.select {
		width: 750rpx;
		height: 90rpx;
		background: #ECECEC;
		display: flex;
		align-items: center;
		padding-left: 30rpx;
		position: relative;
	}

	.date {
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		margin-right: 10rpx;
	}

	.scroll {
		height: calc(100vh - 90rpx);
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.item {
		padding: 30rpx 0;
		display: flex;
		align-items: center;
		width: 690rpx;
		height: 150rpx;
		border-bottom: 1px solid #DFDFDF;

		image {
			width: 90rpx;
			height: 90rpx;
		}
	}

	.item-middle {
		margin-left: 30rpx;
		font-size: 30rpx;
		color: #333333;
	}
	.item-middle :nth-child(2) {
		font-size: 28rpx;
		color: #333;
		margin-top: 10rpx;
	}
	.item-middle :nth-child(3) {
		font-size: 26rpx;
		color: #999999;
		margin-top: 10rpx;
	}

	.item-right {
		font-size: 30rpx;
		font-weight: bold;
		color: #F0812D;
		position: absolute;
		right: 60rpx;
	}
</style>
